<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="../dist/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min1.css" />
		<link rel="stylesheet" type="text/css" href="css/bg1.css" />
		<link rel="stylesheet" type="text/css" href="css/1.0.8/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.mi1.css" />

		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}
			
			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
			}
			
			.swiper-container1 {
				width: 100%;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
				/*        border: 1px solid;*/
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
		</style>
	</head>

	<body>
		<div id="menu" style="background-color: rgba(255,255,255, 0.7);">
			<div class="title_img">
				<img src="img/123.png" id="pic" style="float: left;"/>
				<span class="title_span">天乐BIM工程中心</span>
			</div>
			<ul style="margin-right: 20px;">
				<li class="z">首页</li>
				<li class="z">案例展示</li>
				<li class="z">中心概况</li>
				<li class="z">中心动态</li>
				<li class="z">登录/注册</li>
			</ul>
		</div>
		<!-- Swiper -->
		<div class="swiper-container swiper-container-v">
			<div id="page" class="swiper-wrapper">

				<!--第一屏-->
				<div class="swiper-slide">
					<div class="swiper-container1 swiper-container-h">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="sl1">
									<div class="content">
										<h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">天乐BIM工程中心</h1>
										<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">致力于为客户提供专业的第三方BIM技术咨询</p>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sl2">
									<div class="content">
										<h1 class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">天乐BIM工程中心</h1>
										<p class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">为客户项目全生命周期的精细化管理提供数据支撑和技术支撑</p>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sl3">
									<div class="content">
										<h1 class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">天乐BIM工程中心</h1>
										<p class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">为客户项目提供BIM可视化成果展示</p>
									</div>
								</div>
							</div>
						</div>
						<div class="swiper-pagination swiper-pagination-h"></div>
						<!-- Add Arrows -->
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>

				<!--第二屏-->
				<div class="swiper-slide">
					<div class="p2_title ">
						<h2 class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="0.3s">案例展示</h2>
						<p>CASE DISPLAY</p>
					</div>
					<div class="p2_content ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="0.3s">
						<ul>
							<li>

								<img src="img/portfolio/1.png" width="100%" />
								<div class="a">
									体育场馆720全景展示
								</div>

							</li>
							<li><img src="img/portfolio/2.png" width="100%" />
								<div class="a">
									BIM视频展示
								</div>
							</li>
							<li><img src="img/portfolio/3.png" width="100%" />
								<div class="a">
									BIM可视化展示
								</div>
							</li>
						</ul>
						</br>
						<ul>
							<li><img src="img/portfolio/4.png" width="100%" />
								<div class="a">
									少年宫购置及装修改造项目
								</div>
							</li>
							<li><img src="img/portfolio/5.png" width="100%" />
								<div class="a">
									少年宫购置及装修改造项目
								</div>
							</li>
							<li><img src="img/portfolio/6.png" width="100%" />
								<div class="a">
									少年宫购置及装修改造项目
								</div>
							</li>
						</ul>
					</div>

				</div>
				<!--第三屏-->
				<div class="swiper-slide">
					<div class="p3">
						<div class="p3_content">
							<div class="p3_title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="0.3s">
								<h2>关于天乐</h2>
								<p>COMPANY DYNAMICS</p>
							</div>
						</div>

						<div class="p3_content2">
							<div class="p3_content2_left ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="3s" swiper-animate-delay="0.3s">
								<img src="img/about.jpg" width="100%" />
							</div>
							<div class="p3_content2_right ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="3s" swiper-animate-delay="0.3s">
						
								
								<p>我公司从2010年开始关注BIM技术，对BIM技术在工程咨询行业的应用做了许多有益的摸索和尝试。2013年11月，在公司领导的大力支持下，公司从各部门抽调技术骨干力量成立了BIM技术研究小组，正式系统的开展BIM技术在工程咨询行业应用的学习与研究。</p>
								<p>2014年10月，公司整合建筑、结构、设备、工程造价、项目管理及信息工程等专业人力资源，以BIM技术为核心，成立了一直新型的工程综合咨询服务团队——BIM工程中心。中心致力于为客户提供专业的第三方BIM技术咨询服务，为客户项目全生命周期的精细化管理提供数据和技术支持。
目前,BIM中心拥有技术人员40余人，熟练掌握目前较为常用的Revit、Naviswork、Lumion、鲁班、广联达等BIM相关软件。</p>
<p>BIM工程中心成立之初，重点关注BIM技术在民用建筑工程领域的应用与研究，先后承接了天津商业大学新建体育馆项目等多个项目的BIM技术咨询，并在设计和施工阶段取得了一定效果。为更好、更全面的服务于工程建设，近期中心开始将目光聚焦到市政工程、轨道交通工程等领域，并做了一些尝试与研究，如BIM技术在轨道交通工程方案展示，管线综合优化以及后期运维等方面的应用。</p>
							</div>
						</div>

					</div>
				</div>
				<!--第四屏-->
				<div class="swiper-slide">
					<div class="p3_title">
						<h2 style="border-bottom: 1px solid #009ee3;">中心动态</h2>
						<p>CASE DISPLAY</p>
					</div>
					<div class="p4_content">

						<div class="p4_content_1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s">
							<div class="p4_content_1_pic">
								<img src="img/uploads/news-1.png" style="float: left; width: 100%;" />
							</div>
							<div class="p4_content_1_content">
								<h2>中国安防行业市场运营态势及投资前景分析</h2>
								<p>近年来，随着安防需求不断提升以及“互联网＋”发展的推动下，传统安防企业借助人工智能、云计算、大数据、物联网、移动互联等技术呈现多元化发展，安防应用已延伸至智能家居、智能交通、智能医疗、智慧城市等领域。</p>
							</div>

						</div>
						<div class="p4_content_1 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s" swiper-animate-delay="0.3s">
							<div class="p4_content_1_pic" style=" margin:30px 5px 5px 10px;">
								<img src="img/uploads/news-1.png" style="float: left; width: 100%;" />
							</div>
							<div class="p4_content_1_content">
								<h2>中国安防行业市场运营态势及投资前景分析</h2>
								<p>近年来，随着安防需求不断提升以及“互联网＋”发展的推动下，传统安防企业借助人工智能、云计算、大数据、物联网、移动互联等技术呈现多元化发展，安防应用已延伸至智能家居、智能交通、智能医疗、智慧城市等领域。</p>
							</div>
						</div>
						<div class="p4_content_1 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.3s">
							<div class="p4_content_1_pic">
								<img src="img/uploads/news-1.png" style="float: left; width: 100%;" />
							</div>
							<div class="p4_content_1_content">
								<h2>中国安防行业市场运营态势及投资前景分析</h2>
								<p>近年来，随着安防需求不断提升以及“互联网＋”发展的推动下，传统安防企业借助人工智能、云计算、大数据、物联网、移动互联等技术呈现多元化发展，安防应用已延伸至智能家居、智能交通、智能医疗、智慧城市等领域。</p>
							</div>
						</div>
						<div class="p4_content_1 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s" swiper-animate-delay="0.3s">
							<div class="p4_content_1_pic" style=" margin:30px 5px 5px 10px;">
								<img src="img/uploads/news-1.png" style="float: left; width: 100%;" />
							</div>
							<div class="p4_content_1_content">
								<h2>中国安防行业市场运营态势及投资前景分析</h2>
								<p>近年来，随着安防需求不断提升以及“互联网＋”发展的推动下，传统安防企业借助人工智能、云计算、大数据、物联网、移动互联等技术呈现多元化发展，安防应用已延伸至智能家居、智能交通、智能医疗、智慧城市等领域。</p>
							</div>
						</div>

					</div>
				</div>
				<!--第五-->
				<div class="swiper-slide">
					<div class="p5">
						<div class="p5_content">
							<div class="left">
								<div class="">
									<h3>联系方式</h3>
									<p><i class="Hui-iconfont">&#xe6df;</i>&nbsp;地址：天津市河西区下瓦房福建路17号</p>
									<p><i class="Hui-iconfont">&#xe68a;</i>&nbsp;邮编：300000</p>
									<p><i class="Hui-iconfont">&#xe6c7;</i>&nbsp;电话：022-28429965/022-28429967</p>
									<p><i class="Hui-iconfont">&#xe63b;</i>&nbsp;邮箱：tlecc@tlecc.com.cn</p>
								</div>
							</div>
							<div class="right">
								<div class="">
									<h3>在线留言</h3>
									<form action="" method="post">
										<input type="text" name="name" placeholder="您的姓名" class="name">
										<input type="text" name="email" class="name" placeholder="联系方式（邮箱或手机号）">
										<!--<input type="" name="" id="" value="" />-->
										<textarea name="message" class="form-control" placeholder="留言信息"></textarea></br>
										<input type="submit" name="tijiao" id="tijiao" value="确认发送" class="enter" />
									</form>
								</div>
							</div>
						</div>
					    <div class="p5_bottom">
					         <p style="color: rgba(255,255,255,0.6);">Copyright © 1993-2017 天津天乐国际工程咨询设计有限公司. </p>
					         <p class="down" style="color:rgba(255,255,255,0.6);">津ICP备10200330号</p>
					    </div>
					</div>

				</div>
                
                
				<!-- Add Pagination -->
				<div class="swiper-scrollbar swiper-pagination-v"></div>
			</div>

			<!-- Swiper JS -->
			<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
			<!--<script src="../dist/js/swiper.min.js"></script>-->
			<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/swiper.animate1.0.2.min1.js" type="text/javascript" charset="utf-8"></script>
			<!-- Initialize Swiper -->
			<script>
				var swiper1 = new Swiper('.swiper-container-h', {
					pagination: '.swiper-pagination-h',
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					paginationClickable: true,

					
					centeredSlides: true,
					loop: true,
					autoplay: 3000,
					autoplayDisableOnInteraction: false,
					onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
						swiperAnimateCache(swiper); //隐藏动画元素 
						swiperAnimate(swiper); //初始化完成开始动画
					},
					onSlideChangeEnd: function(swiper) {
						swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

					}
				})
				var swiper = new Swiper('.swiper-container-v', {
					pagination: '.swiper-pagination-v',
					scrollbar: '.swiper-scrollbar',
					direction: 'vertical',
					grabCursor: true,
					slidesPerView: 1,
					paginationClickable: true,
					
					mousewheelControl: true,
					//					
					onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
						swiperAnimateCache(swiper); //隐藏动画元素 、
						swiperAnimate(swiper); //初始化完成开始动画
					},
					onTransitionEnd:function(swiper){
							console.log(swiper.activeIndex)
							if(swiper.activeIndex == 0) {
							swiper1.loopedSlides = 1;
							swiper1.startAutoplay();
						}
						
					},
					onSlideChangeEnd: function(swiper) {
						swiperAnimate(swiper);
						var index = $("#page>.swiper-slide-active").attr("data-index");
						if(swiper.activeIndex == 1) {
							swiper1.stopAutoplay();
						}

						if(index > 0) {
							$("#pic").css({
								"height": "50px",
								"transition": "1s all"
							})
							$("#menu").css({
								"height": "50px",
								"background-color": "white",
								"transition": "1s all"
							})
							$(".z").css({
								"padding-top": "0px",
								"transition": "1s all"
							})
							$(".title_span").css({
								"margin-top": "10px",
								"transition": "1s all"
							})

						} else {
							$("#pic").css({
								"height": "80px",
								"transition": "1s all"
							})
							$("#menu").css({
								"height": "98px",
								"background-color": "rgba(255,255,255, 0.7)",
								"transition": "1s all"
							})
							$(".z").css({
								"padding-top": "15px",
								"transition": "1s all"
							})
							$(".title_span").css({
								"margin-top": "25px",
								"transition": "1s all"
							})
						}
					},
					//					onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					//						swiperAnimateCache(swiper); //隐藏动画元素 
					//						swiperAnimate(swiper); //初始化完成开始动画
					//					}

				});

				for(var i = 0; i < $("#page>.swiper-slide").length; i++) {
					$("#page>.swiper-slide").eq(i).attr("data-index", i);
				}
			</script>

	</body>

</html>